<template>
  <div class="main">
    <van-row class="van_row">
      <van-nav-bar
        title="品质榜单"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
      />
    </van-row>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="images" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false" :column-num="4">
      <van-grid-item
        v-for="(item, index) in dataList"
        :key="index"
        @click="meizhi"
      >
        <div class="xiaoge">
          <div class="image_div">
            <van-image
              :src="require(`../../assets/tubiao/${item.src}`)"
              class="div_img"
            />
          </div>
          <span class="div_xiaoge_span">{{ item.title }}</span>
        </div>
      </van-grid-item>
    </van-grid>
    <div class="haowuoping">
      <span class="div_span">好产品</span>
    </div>
    <van-grid :border="false" :column-num="2" class="van_tu" >
      <van-grid-item
        class="van-tu-item"
        v-for="(item, index) in imagesList"
        :key="index"
        @click="showPopup"
      >
        <van-image :src="item.imagesrc" />
        <div class="div_title">
          <span class="title_text">{{ item.imagetitle }} </span>
          <div class="fudong">
            <span class="ding">顶</span>
            <span class="ding1">{{ item.imageding }}</span>
            <span class="cai">踩</span>
            <span>{{ item.imagecai }}</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
    <div class="gengduo" @click="gengduo">查看更多</div>
    <div class="haowuoping">
      <span class="div_span">好服务</span>
    </div>
    <van-grid :border="false" :column-num="2" class="van_tu">
      <van-grid-item
      
        class="van-tu-item"
        @click="showPopup"
        v-for="(item, index) in imagesList"
        :key="index"
      >
        <van-image :src="item.imagesrc"  />
        <div class="div_title">
          <span class="title_text">{{ item.imagetitle }} </span>
          <div class="fudong">
            <span class="ding" >顶</span>
            <span class="ding1">{{ item.imageding }}</span>
            <span class="cai">踩</span>
            <span>{{ item.imagecai }}</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
    <div class="gengduo" @click="gengduo">查看更多</div>
    <van-popup v-model="show" class="div_dingwen">
      <div class="div_dingwen_item">
        <van-image
          class="van-image_png"
          src="https://img0.baidu.com/it/u=2127658906,566354125&fm=26&fmt=auto"
        ></van-image>
        <div class="div_tubiao">
          <van-icon name="like-o" class="icon_left" @click="xintiaozhuan" />
          <van-icon name="close" class="icon_right" @click="guangbi" />
        </div>
        <div class="div_span">
          <span class="div_span_zi">奈雪的茶为国内知名茶饮品牌</span>
        </div>
      </div>
      <div class="jieshao">公司介绍</div>
      <div class="div_wenzi">
        奈雪的茶为国内知名茶饮品牌，创立于2015年，总部位于广东省深圳市，隶属于深圳市品道餐饮管理有限公司。创新打造“茶+软欧包”的形式，以20-35岁年轻女性为主要客群，坚持茶底4小时一换，软欧包不过夜。
        <p>
          奈雪的茶坚持为现代人提供“一杯好茶，一口软欧包”的美好生活体验，期望成为中国茶走向世界的推动者。
        </p>
        2017年12月，奈雪的茶开始走出广东地区，向全国范围内扩张，正式开启“全国城市拓展计划“。目前，奈雪的茶已扩张至北方、华中、华东、西南地区，遍布全国15座城市。所有门店均为直营，且不做任何形式的加盟。
        <p>
          今年，奈雪将深耕已开拓地区，通过增加门店数量以点带面地扩大奈雪的品牌影响力。
        </p>
      </div>
      <van-row class="van-row_footer_div">
        <van-col span="12" class="van-col_footer_left" @click="toubiao_fandui">
          <van-icon name="good-job" class="xunzhuan" />
          <span> 反对 (<span>103</span>)票 </span>
        </van-col>
        <van-col
          span="12"
          class="van-col_footer_right"
          @click="toubiao_dianzan"
        >
          <van-icon name="good-job-o" />
          <span>
            支持 (
            <span>689</span>
            )票
          </span>
        </van-col>
      </van-row>
    </van-popup>
    <Footer></Footer>
  </div>
</template>
<script>
import Vue from "vue";
import { Lazyload } from "vant";
import Footer from "../../components/Footer/footer.vue";
Vue.use(Lazyload);
export default {
  data() {
    return {
      show: false,
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016f815ba31c62a8012099c84c47cf.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642832900&t=9b32b8d63eb8534bdc32f03e4d92953a",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fspider202034%2F23%2Fw1080h543%2F20200304%2F8d2f-iqmtvwu5966737.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642832900&t=1a08e8b71f2c44b430abff9870480985",
        "https://img2.baidu.com/it/u=2977142005,3802855639&fm=26&fmt=auto",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c4c35cb7fbdfa801208f8b6d1b64.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642832900&t=a23291a5065597fd98dcc82b970d31dc",
      ],
      dataList: [
        {
          src: "1.1.png",
          title: "食品",
        },
        {
          src: "1.png",
          title: "美妆",
        },
        {
          src: "2.png",
          title: "母婴",
        },
        {
          src: "3.png",
          title: "日用",
        },
        {
          src: "4.png",
          title: "电子",
        },
        {
          src: "5.png",
          title: "家装",
        },
        {
          src: "6.png",
          title: "服务",
        },
        {
          src: "7.png",
          title: "其他",
        },
      ],
      imagesList: [
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.chengshiluntan.com%2Furl%2F%3Fu%3Dhttp%3A%2F%2Fservice.mobtou.com%2Fdata%2Fimages%2F200310%2F200310113741731775719.jpeg&refer=http%3A%2F%2Fnews.chengshiluntan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833177&t=7814ee58d0f3bdab33aefec325e24adf",
          imagetitle: "奈雪の茶",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2367084608-E5147A0FCCDCC3C907FF62FFB3ABF0FE%2F0%3Ffmt%3Djpg%26size%3D174%26h%3D515%26w%3D900%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833494&t=324a4323d02bc776d215e84a53bdc53d",
          imagetitle: "德国自然浑浊型...",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn21%2F366%2Fw700h466%2F20180509%2F22e4-haichqz2125407.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833350&t=421adedd7bd05d2013f863a3f2b99010",
          imagetitle: "文和友龙虾",
          imageding: "630",
          imagecai: "103",
        },
        {
          imagesrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2016%2F370%2F922%2F2943229073_182903867.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642833390&t=bb2b2f6168500f2eaa7ca1026538e984",
          imagetitle: "若男鸡蛋挂面",
          imageding: "630",
          imagecai: "103",
        },
      ],
    };
  },
  components: {
    Footer,
  },
  methods: {
    // 弹框
    showPopup() {
      
      this.show = true;
    },
    // 美食路由跳转

    xintiaozhuan() {
      this.$router.push({ path: "/Follow" }).catch((error) => error);
    },
    // 取消按钮
    guangbi() {
      this.show = false;
    },
    // 投票反对
    toubiao_fandui() {},
    // 投票点赞
    toubiao_dianzan() {},

    onClickLeft() {},
    onClickRight() {},
    // 美食路由跳转
    meizhi() {
      this.$router.push({ path: "/food" }).catch((error) => error);
    },
    // 更多跳转
    gengduo() {
      this.$router.push({ path: "/food" }).catch((error) => error);
    },
   
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-top: 48px;
  .van_row {
    position: relative;
    .van-nav-bar {
      color: rgba(42, 131, 78, 1);
      background-color: rgba(239, 239, 239, 1);
      font-size: 14px;

      text-align: center;
      /deep/div.van-nav-bar__title {
        font-size: 18px;
        color: rgba(42, 131, 78, 1);
      }
    }
    .van-nav-bar_after {
      position: fixed;
      width: 77px;
      height: 29px;
      border-radius: 50px;
      border: 1px solid silver;
      line-height: 29px;

      text-align: center;
      font-size: 16px;
      z-index: 13;
      top: 8px;
      right: 10px;
    }
  }
  .van-swipe {
    height: 221px;
    .images {
      width: 375px;
      height: 221px;
    }
  }
  .van-grid {
    padding: 10px 18px;
    .van-grid-item {
      .xiaoge {
        width: 65px;
        height: 78px;

        text-align: center;
        .image_div {
          width: 50px;
          height: 50px;
          background-color: rgba(229, 229, 229, 1);
          margin: auto;
          margin-bottom: 5px;

          line-height: 55px;
          text-align: center;
          border-radius: 50px;
          .div_img {
            width: 25px;
            height: 25px;
          }
        }
        .div_xiaoge_span {
          font-size: 16px;
        }
      }
    }
  }
  .haowuoping {
    height: 47px;
    line-height: 47px;
    text-align: center;

    .div_span {
      font-size: 16px;
      display: inline-block;
      width: 240px;
      height: 47px;
    }
    .div_span::after {
      content: "——";
      display: inline-block;
      width: 45px;
    }
    .div_span::before {
      content: "——";
      width: 45px;
      display: inline-block;
    }
  }
  .van_tu {
    padding: 15px;
    .van-tu-item {
      .div_title {
        width: 100%;
        height: 29px;
        line-height: 29px;
        font-size: 8px;
        .title_text {
          display: inline-block;
          width: 77px;
          height: 29px;
          line-height: 29px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .fudong {
          float: right;
          .ding {
            color: rgb(25, 199, 25);
          }
          .cai {
            margin-left: 2px;
            color: red;
          }
          .ding1 {
            margin-left: 2px;
          }
        }
      }
    }
  }
  .gengduo {
    width: 173px;
    height: 24px;
    margin: auto;
    background-color: rgba(42, 131, 78, 1);
    color: white;
    font-size: 12px;
    line-height: 24px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 5px;
  }
  .div_dingwen {
    width: 338px;
    height: 557px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 11px;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    .div_dingwen_item {
      height: 170px;
      border-radius: 11px;
      position: relative;
      .van-image_png {
        width: 338px;
        height: 170px;
      }
      .div_tubiao {
        width: 100%;
        position: absolute;
        height: 34px;

        top: 1px;
        font-size: 20px;
        .icon_left {
          float: left;
          color: red;
          padding: 5px;
        }
        .icon_right {
          float: right;

          padding: 5px;
        }
      }
      .div_span {
        position: absolute;
        height: 25px;
        color: white;
        bottom: 5px;
        left: 10px;
        font-size: 16px;
        font-weight: 100;
      }
    }
    .jieshao {
      text-align: left;
      margin: 10px 5px 0px 10px;
      font-size: 8px;
      font-weight: bold;
    }
    .div_wenzi {
      text-align: left;

      padding: 0 10px;
      font-size: 8px;
    }
    .van-row_footer_div {
      height: 41px;
      margin: 10px 0;
      padding: 0 18px;

      .van-col_footer_left,
      .van-col_footer_right {
        width: 145px;
        height: 41px;
        margin-right: 5px;

        background-color: white;
        color: green;
        border-radius: 5px;
        line-height: 41px;
        text-align: center;
        font-size: 14px;
        .xunzhuan {
          transform: rotate(180deg);
        }
      }
      .van-col_footer_right {
        background-color: green;
        color: white;
      }
    }
  }
}
</style>